<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>局部打印/IFRAME（简历待完成）</span>
      </div>
      <div v-show="false" id="table-print">前端工程师</div>
      <el-button type="primary" @click="HandlePrint()">打印</el-button>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Print',
  data() {
    return {}
  },
  methods: {
    HandlePrint() {
      let iframe = document.getElementById('print-iframe')
      if (!iframe) {
        const el = document.getElementById('table-print')
        iframe = document.createElement('IFRAME')
        let doc = null
        iframe.setAttribute('id', 'print-iframe')
        document.body.appendChild(iframe)
        doc = iframe.contentWindow.document
        doc.write(``)
        doc.write('<div>' + el.innerHTML + '</div>')
        doc.close()
        iframe.contentWindow.focus()
      }
      iframe.contentWindow.print()
    }
  }
}
</script>

<style lang="scss">
#print-iframe {
  display: none;
}
</style>
